<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Tableau à ligne dynamique</title>
        <link type="text/css" rel="stylesheet" href="../css/bootstrap.css">
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="../js/bootstrap.js"></script>
    </head>
    <body>
        <table class="table-bordered table-condensed table-striped">
            <thead>
                <tr>
                    <td>Colonne 1</td>
                    <td>Colonne 2</td>
                    <td>Colonne 3</td>
                </tr>
            </thead>
            <tbody>
                <?php for ($i = 0; $i < 10; $i++): ?>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                <?php endfor; ?>
                <tr id="entrant">
                    <td colspan="100">&nbsp;</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="100">
                        <button id="btn-line" class="btn btn-primary">Ajouter ligne</button>
                    </td>
                </tr>
            </tfoot>
        </table>
        <script type="text/javascript">
            $(function() {
                $('#btn-line').click(function(e) {
                    e.preventDefault();
                    // Master
                    if ($('#entrant').length > 0) {
                        // Nouvelle ligne
                        var $tr = $('<tr>', {
                            class: 'enfant'
                        });
                        for (i = 0; i < 3; i++) {
                            var $td = $('<td>', {text: 'new' + (i+1)});
                            $tr.append($td);
                        }
                        $tr.insertAfter('#entrant');
                    } else {
                        alert('Le Maitre n a pas ete selectionner');
                    }
                });
                $(document).on('click', '.enfant', function(e){
                    e.preventDefault();
                    if(confirm("Voulez-vous effacer ?")){
                        $(this).remove();
                    }
                });
            });
        </script>
    </body>
</html>